<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
const props = defineProps(["card"]);

const convertLevel = (level: any) => {
  switch (level) {
    case "JUNIOR":
      return "初级";
    case "MIDDLE":
      return "中级";
    case "SENIOR":
      return "高级";
    default:
      return "未知";
  }
};
</script>

<template>
  <div class="cursor-pointer w-70 rounded-xl shadow-[5px_5px_10px_0_#d5d5d5]">
    <img class="rounded-t-lg" :src="card.coverImg" />

    <div class="p-2">
      <div class="h-10">
        <span
          class="text-sm w-60 text-ellipsis of-hidden break-all lime-clamp-2"
        >
          {{ props.card.title }}
        </span>
      </div>
      <div class="flex items-center my-2 text-xs">
        <span class="text-red-500">
          级别：{{ convertLevel(props.card.courseLevel) }}
        </span>
        <span class="flex items-center">
          <img
            class="mr-1 w-3 h-3"
            src="https://front.cdn.xdclass.net/images/fire.webp"
            alt="fire icon"
          />
          <img
            class="mr-1 w-3 h-3"
            src="https://front.cdn.xdclass.net/images/fire.webp"
          />
          <img
            class="mr-1 w-3 h-3"
            src="https://front.cdn.xdclass.net/images/fire.webp"
          />
          <img
            class="mr-1 w-3 h-3"
            src="https://front.cdn.xdclass.net/images/fire.webp"
          />
          <img
            class="mr-1 w-3 h-3"
            src="https://front.cdn.xdclass.net/images/fire.webp"
          />
        </span>
      </div>

      <div class="flex items-center justify-between mt-5px">
        <span class="peoples text-2 c-#7f7f7f">
          <el-icon><User /></el-icon>
          {{ card.uv }}
        </span>
        <div class="flex items-center justify-center">
          <div class="c-#aaa">
            ￥<span class="mr-1 lime-through">{{ card.oldAmount }}</span>
          </div>
          <div class="c-#e51b11">
            ￥<span class="mt-1 text-16px text-red-500">{{ card.amount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- CardPage.vue -->
<style scoped>
.cursor-pointer {
  cursor: pointer;
}
.w-70 {
  width: 17.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.h-10 {
  height: 2.5rem;
}
.text-sm {
  font-size: 0.875rem;
}
.w-60 {
  width: 15rem;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.of-hidden {
  overflow: hidden;
}
.break-all {
  word-break: break-all;
}
.lime-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.text-xs {
  font-size: 0.75rem;
}
.text-red-500 {
  color: #ef4444;
}
.mr-1 {
  margin-right: 0.25rem;
}
.w-3 {
  width: 0.75rem;
}
.h-3 {
  height: 0.75rem;
}
.mt-5px {
  margin-top: 5px;
}
.text-2 {
  font-size: 0.5rem;
}
.c-#7f7f7f {
  color: #7f7f7f;
}
.c-#aaa {
  color: #aaa;
}
.lime-through {
  text-decoration: line-through;
}
.c-#e51b11 {
  color: #e51b11;
}
.mt-1 {
  margin-top: 0.25rem;
}
.text-16px {
  font-size: 16px;
}
</style>
